<template>
  <div>
    <div class="registered">
      <h1>
        <img @click="returned" src="../../assets/left/left.png" alt />
        注册
      </h1>

      <table style="border-collapse:separate; border-spacing:0px 10px;">
        <tr>
          <td>用户名：</td>
          <td>
            <input type="text" ref="user1" placeholder="请输入用户名" />
          </td>
        </tr>
        <tr>
          <td>密码：</td>
          <td>
            <input type="pwd" ref="pwd1" placeholder="请输入密码" />
          </td>
        </tr>
        <tr>
          <td>确认密码：</td>
          <td>
            <input type="pwd" ref="pwd2" placeholder="请再次输入密码" />
          </td>
        </tr>
      </table>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="reg">免费注册</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    returned() {
      this.$router.go(-1);
    },
    reg() {
      let user1 = this.$refs.user1.value;
      let pwd1 = this.$refs.pwd1.value;
      let pwd2 = this.$refs.pwd2.value;
      if (user1 == "") {
        this.$toast("用户名不能为空");
        return;
      }
      if (pwd1 == "") {
        this.$toast("密码不能为空");
        return;
      }
      if (pwd1 !== pwd2) {
        this.$toast("两次密码不一样");
        return;
      }

      if (localStorage.Account == undefined) {
        let Account = [];
        Account.push({
          pwd: this.$refs.pwd1.value,
          user: this.$refs.user1.value
        });
        let now = JSON.stringify(Account);
        localStorage.setItem("Account", now);
      } else {
        let arr = JSON.parse(localStorage.getItem("Account"));
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].user == user1) {
            this.$toast("该用户名已被注册");
            return;
          }
        }
        arr.push({
          pwd: this.$refs.pwd1.value,
          user: this.$refs.user1.value
        });
        let now2 = JSON.stringify(arr);
        localStorage.setItem("Account", now2);
      }

      this.$toast("注册成功");
      this.$router.push("/login");

      this.$refs.user1.value = "";
      this.$refs.pwd1.value = "";
      this.$refs.pwd2.value = "";
    }
  },
  components: {}
};
</script>

<style scoped lang='less'>
.registered {
  h1 {
    text-align: center;
    margin: 10px 0;
    position: relative;
    img {
      width: 13px;
      position: absolute;
      left: 24px;
      top: 10px;
    }
  }
  table {
    box-sizing: border-box;
    margin: auto;
    padding: 10px 0;
    text-align: right;
    tr {
      margin: 10px;
      td {
        input {
          width: 19rem;
          height: 2.4rem;
        }
      }
    }
  }
}
</style>
